<template>
  <div class="datacenter">
    <div class="datacenter_con">
      <div class="tit">
        <div class="line"></div>
        <div class="text">离线文件</div>
      </div>
      <div class="btn_row">
        <el-button type="primary" size="small" @click="uploadFileFun"
          >上传文件</el-button
        >
        <div class="search_box">
          <el-input v-model="input" placeholder="请输入名称"></el-input>
          <el-button
            type="primary"
            size="small"
            @click="findFileByFileNameFun()"
            icon="el-icon-search"
          ></el-button>
        </div>
      </div>
      <table-view
        :tData="tData"
        :tHead="tHead"
        @editMsg="editMsg"
        @deleteFun="deleteFun"
        @detailFun="detailFun"
      ></table-view>
      <pagination
        class="datacenter_con_fenye"
        :pageSize="pageSize"
        :total="total"
        @paginationCallBack="paginationCallBack"
      ></pagination>
      <!-- <pagination class="datacenter_con_fenye"></pagination> -->
    </div>
    <transition name="fade">
      <div class="detail" v-if="isAlert">
        <div class="detail_box detail_box_form">
          <div class="top">
            <div class="edit_text">上传文件</div>
            <div class="close" @click="cancel()">X</div>
          </div>
          <div class="from_box table_content" id="table_content">
            <el-form
              class="form_item"
              ref="form"
              :rules="rules"
              :model="form"
              label-width="110px"
            >
              <el-form-item label="选择文件">
                <input
                  class="fileExport"
                  type="file"
                  id="fileExport"
                  ref="inputer"
                  style="display: none"
                  @change="handleFileChange"
                />
                <div class="upFileBtn" @click="xzfun">+选择文件</div>
              </el-form-item>
              <el-form-item label="目标目录">
                <el-input v-model="form.fileDirectory"></el-input>
              </el-form-item>
              <el-form-item label="文件类型" prop="type">
                <!-- <el-input v-model="form.topic"></el-input> -->
                <el-select
                  v-model="form.type"
                  placeholder="请选择"
                  @change="handleSelectt(form.type)"
                >
                  <el-option
                    v-for="(item, idx) in optionss"
                    :key="idx"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="文件名称">
                <el-input disabled type="text" v-model="form.desc"></el-input>
              </el-form-item>
              <el-form-item label="资产名称" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="资产描述">
                <el-input v-model="form.describes"></el-input>
              </el-form-item>
              <el-form-item label="目标域" prop="region">
                <el-input v-model="form.region"></el-input>
              </el-form-item>
              <el-form-item label="发布者姓名" prop="issueName">
                <el-input v-model="form.issueName"></el-input>
              </el-form-item>
              <el-form-item label="发布者邮箱">
                <el-input v-model="form.issueMail"></el-input>
              </el-form-item>
              <el-form-item label="发布者电话">
                <el-input v-model="form.issueIphone"></el-input>
              </el-form-item>
              <el-form-item label="发布者机构" prop="issueOrganization">
                <!-- <el-input v-model="form.topic"></el-input> -->
                <el-select
                  v-model="form.issueOrganization"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, idx) in options"
                    :key="idx"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="业务类别"
                ref="yw_lb_name"
                prop="yw_lb_name"
                id="ywlb"
              >
                <!-- <el-input v-model="yw_lb_name" style="display: none"></el-input> -->
                <el-menu
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                >
                  <!-- <el-submenu index="2"> -->
                  <!-- <template slot="title">{{ yw_lb_name }}</template> -->
                  <!-- <el-menu-item index="测绘导航">测绘导航</el-menu-item>
                    <el-menu-item index="气象水文">气象水文</el-menu-item>
                    <el-menu-item index="jz情报">jz情报</el-menu-item>
                    <el-submenu index="2-4">
                      <template slot="title">基础数据</template>
                      <el-menu-item index="zz力量">zz力量</el-menu-item>
                      <el-menu-item index="zb工程">zb工程</el-menu-item>
                    </el-submenu> -->

                  <el-cascader
                    v-model="yw_lb_name"
                    :options="optionz"
                    :props="{ expandTrigger: 'hover' }"
                    @change="handleSelect"
                  ></el-cascader>
                  <!-- </el-submenu> -->
                </el-menu>
              </el-form-item>
              <el-form-item label="目标库" v-if="isshow" v-show="isshows">
                <el-input v-model="form.tarDatabase"></el-input>
              </el-form-item>
              <el-form-item label="目标表" v-if="isshow" v-show="isshows">
                <el-input v-model="form.tarTable"></el-input>
              </el-form-item>
              <el-form-item
                label="schema"
                id="el_texttarea"
                v-if="isshow"
                v-show="isshows"
              >
                <!-- <textarea name="" id="addtextarea" v-model="form.tarTableSchema"  cols="75" rows="5" style="border:1px solid #ccc"></textarea> -->
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  placeholder="请输入内容"
                  v-model="form.tarTableSchema"
                >
                </el-input>
              </el-form-item>
            </el-form>
            <div
              id="table_box"
              v-show="isshows"
              v-if="isshow == 1 ? true : false"
            >
              <div class="table_label">属性</div>
              <div class="table_contents" id="table_contents">
                <div class="icon_box" @click="addTableFun">
                  <i class="el-icon-circle-plus-outline"></i>
                </div>
                <div class="table_tab">
                  <add-table
                    :tableData="tableData"
                    :table_Head="table_Head"
                    :options_tab="options_tab"
                    @del_tab_fun="del_tab_fun"
                  ></add-table>
                </div>
              </div>
            </div>
            <div class="btn_box">
              <el-button size="small" @click="cancel()">取消</el-button>
              <el-button type="primary" size="small" @click="onSubmit"
                >上传</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="detail" v-if="isDelAlert">
        <div class="detail_box" id="detail_box">
          <div class="top">
            <div class="edit_text">删除</div>
            <div class="close" @click="cancelDel()">X</div>
          </div>
          <div class="from_box from_box_text">
            <div>确认删除{{ itemMsg.fileName }}！</div>
          </div>
          <div class="btn_group">
            <el-button size="small" @click="cancelDel">取消</el-button>
            <el-button
              type="primary"
              size="small"
              @click="deleteOfflineFileById"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="detail detaill" v-if="isDetial">
        <div class="detail_box detail_box_form">
          <div class="top">
            <div class="edit_text">详情</div>
            <div
              class="close"
              @click="
                () => {
                  this.isDetial = false;
                }
              "
            >
              X
            </div>
          </div>
          <div class="from_box from_box_text from_box_texts">
            <el-form ref="form" style="width: 100%" :model="form" disabled>
              <el-form-item label="文件类型:">
                <el-input v-model="msgDetail.type"></el-input>
              </el-form-item>
              <el-form-item label="目标目录" prop="fileDirectory">
                <el-input v-model="form.fileDirectory"></el-input>
              </el-form-item>
              <el-form-item label="资产名称：">
                <el-input v-model="msgDetail.name"></el-input>
              </el-form-item>
              <el-form-item label="文件名称：">
                <el-input v-model="msgDetail.fileName"></el-input>
              </el-form-item>
              <el-form-item label="文件代理名称：">
                <el-input v-model="msgDetail.proxyFileName"></el-input>
              </el-form-item>
              <el-form-item label="文件大小：">
                <el-input v-model="msgDetail.fileSize"></el-input>
              </el-form-item>

              <el-form-item label="资产描述：">
                <el-input v-model="msgDetail.describes"></el-input>
              </el-form-item>
              <el-form-item label="发布者姓名：">
                <el-input v-model="msgDetail.issueName"></el-input>
              </el-form-item>
              <el-form-item label="发布者邮箱：">
                <el-input v-model="msgDetail.issueMail"></el-input>
              </el-form-item>
              <el-form-item label="发布机构：">
                <el-input v-model="msgDetail.issueOrganization"></el-input>
              </el-form-item>
              <el-form-item label="发布电话：">
                <el-input v-model="msgDetail.issueIphone"></el-input>
              </el-form-item>
              <el-form-item label="业务类别：">
                <el-input v-model="msgDetail.business"></el-input>
              </el-form-item>
              <el-form-item label="目标域：">
                <el-input v-model="msgDetail.region"></el-input>
              </el-form-item>
              <el-form-item label="来源：">
                <el-input v-model="msgDetail.source"></el-input>
              </el-form-item>

              <el-form-item label="创建时间：">
                <el-input v-model="msgDetail.createTime"></el-input>
              </el-form-item>

              <el-form-item label="目标表：" v-if="isshow">
                <el-input v-model="msgDetail.tarDatabase"></el-input>
              </el-form-item>
              <el-form-item label="目标库：" v-if="isshow">
                <el-input v-model="msgDetail.tarTable"></el-input>
              </el-form-item>
              <el-form-item label=""> </el-form-item>
              <el-form-item
                id="schema"
                label="schema:"
                v-if="isshow"
                v-show="isshows"
              >
                <textarea
                  id="textarea"
                  name=""
                  disabled
                  v-model="form.tarTableSchema"
                  cols="75"
                  rows="5"
                  style="border: 1px solid #ccc"
                ></textarea>
                <!-- <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"

                placeholder="请输入内容"
                v-model="form.tarTableSchema">
                </el-input> -->
              </el-form-item>
              <!-- <el-form-item label="属性：">
                                <el-input v-model="msgDetail.attrs"></el-input>
                            </el-form-item> -->
              <div id="zsbox" v-if="isshow">
                <div id="table_box">
                  <div class="table_label">属性:</div>
                  <div class="table_contents" id="table_contents">
                    <div class="icon_box" @click="addTableFun"></div>
                    <div class="table_tab">
                      <Addtables
                        :type="typ"
                        :tableData="attrsarr"
                        :table_Head="table_Head"
                        :options_tab="options_tab"
                        @del_tab_fun="del_tab_fun"
                      ></Addtables>
                    </div>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import TableView from "../common/tableView";
import pagination from "../common/pagination";
import {
  findOfflineFile,
  findFileByFileName,
  upload,
  deleteOfflineFileById,
  getall_options,
  getall_optionss,
} from "@/api/testRequest";
import AddTable from "../common/addTable";
import Addtables from "../common/addtables";
export default {
  name: "datacenter",
  components: {
    TableView,
    pagination,
    AddTable,
    Addtables,
  },
  data() {
    var names = (rule, value, callback) => {
      var nameReg = /^(?:[\u4e00-\u9fa5·]{2,16})$/;
      if (!value) {
        return callback(new Error("请输入名称"));
      } else if (!nameReg.test(value)) {
        return callback(new Error("请输入正确的名称"));
      } else {
        callback();
      }
    };
    var ips = (rule, value, callback) => {
      var nameReg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/;
      if (!value) {
        return callback(new Error("请输入队列地址"));
      } else if (!nameReg.test(value)) {
        return callback(new Error("请输入正确的队列地址"));
      } else {
        callback();
      }
    };

    var issueName = (rule, value, callback) => {
      var nameReg = /^(?:[\u4e00-\u9fa5·]{2,16})$/;
      if (!value) {
        return callback(new Error("请输入队列地址"));
      } else if (!nameReg.test(value)) {
        return callback(new Error("请输入正确的队列地址"));
      } else {
        callback();
      }
    };
    //手机号
    var telephoneValid = (rule, value, callback) => {
      var teleReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      if (!value) {
        return callback(new Error("请输入手机号"));
      } else if (!teleReg.test(value)) {
        return callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    // yw_lb_names
    var yw_lb_names = (rule, value, callback) => {
      if (!this.yw_lb_name) {
        return callback(new Error("请输选择业务类别"));
      } else {
        callback();
      }
    };
    return {
      rules: {
        name: [
          //姓名
          { required: true, message: "请输入资产名称", trigger: "blur" },
        ],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        ip: [{ required: true, validator: ips, trigger: "blur" }],
        topic: [{ required: true, message: "请输入topic", trigger: "blur" }],
        issueName: [{ required: true, message: "请输入内容", trigger: "blur" }],
        issueOrganization: [
          { required: true, message: "请选择发布机构", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择文件类型", trigger: "change" },
        ],
        issueIphone: [
          { required: true, validator: telephoneValid, trigger: "blur" },
        ],
        createTime: [
          { required: true, message: "请选择发布时间", trigger: "change" },
        ],
        yw_lb_name: [
          { required: true, validator: yw_lb_names, trigger: "click" },
        ],
        region: [
          { required: true, message: "请输入目标域", trigger: "change" },
        ],
        fileDirectory: [
          { required: true, message: "请输入目标目录", trigger: "blur" },
        ],
      },
      yw_lb_name: "请选择", //业务类别
      isAlert: false, //上传文件弹窗
      input: "", // 模糊查村
      tHead: [
        // 表头
        { field: "orderNum", title: "序号", width: 60 },
        { field: "name", title: "资产名称", width: 240 },
        { field: "fileName", title: "文件名称", width: 250 },
        { field: "fileSize", title: "文件大小", width: 108 },
        { field: "type", title: "文件类型", width: 120 },
        { field: "source", title: "来源", width: 120 },
        // { field: "issueIphone", title: "发布者电话" },
        // { field: "business", title: "业务类别" },
        { field: "createTime", title: "创建时间" },
      ],
      tData: [], //表的内容
      form: {
        desc: "", // 文件名称
        name: "",
        region: "",
        describes: "",
        issueName: "",
        issueMail: "",
        issueOrganization: "",
        issueIphone: "",
        type: "结构化文件",
        fileDirectory: "",
        tarTableSchema: "",
      },
      fileObj: {
        formData: "", //上传到后台的文件数据
      },
      file: "", // 文件
      isDelAlert: false,
      itemMsg: "", //删除当前行的名称
      isDetial: false, // 详情弹窗
      msgDetail: "", // 详情信息
      table_Head: [
        { field: "code", title: "字段标识" },
        { field: "name", title: "字段名称" },
        { field: "type", title: "字段类型" },
        { field: "desc", title: "字段描述" },
      ],
      tableData: [],
      attrsarr: [],
      pageNo: 1,
      pageSize: 10, //每页显示几条
      total: 10, //总条数
      typ: "66",
      isshow: 1,
      isshows: true,
      options_tab: [
        {
          value: "INT",
          label: "INT",
        },
        {
          value: "VARCHAR",
          label: "VARCHAR",
        },
        {
          value: "DATE",
          label: "DATE",
        },
      ],
      optionz: [],
      optionss: [
        {
          value: 1,
          name: "结构化文件",
        },
        {
          value: 2,
          name: "非结构化文件",
        },
      ],
      options: [],
      value: "",
    };
  },
  mounted() {
    this.findFileByFileName();
    this.getall_options();
    this.getall_optionss();
  },
  methods: {
    getall_options() {
      getall_options().then((res) => {
        this.options = JSON.parse(res.data.dicValue);
      });
    },
    getall_optionss() {
      getall_optionss().then((res) => {
        this.optionz = JSON.parse(res.data.dicValue);
      });
    },
    handleSelect(key, keyPath) {
      this.yw_lb_name = key;
      this.$refs.yw_lb_name.clearValidate();
    },
    handleSelectt(val) {
      if (val == 1) {
        this.isshow = true;
        this.isshows = true;
      } else {
        this.isshow = false;
      }
    },
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hour = " 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      return defaultDate;
    },
    addTableFun() {
      var obj = {
        code: "",
        name: "",
        type: "",
        desc: "",
      };
      this.tableData.push(obj);
    },
    del_tab_fun(msg, idx) {
      this.tableData.splice(idx, 1);
    },
    //列表查询接口
    findOfflineFile() {
      findOfflineFile({}).then((res) => {
        var j = 1;
        for (var i in res.data) {
          res.data[i].isDel = true; //用来展示详情按钮
          res.data[i].orderNum = j++; //用来展示详情按钮
        }
        this.tData = res.data;
      });
    },

    findFileByFileNameFun() {
      this.pageNo = 1;
      this.findFileByFileName();
    },
    // 模糊查村接口
    findFileByFileName() {
      findFileByFileName({
        pageSize: 10,
        pageNo: this.pageNo,
        name: this.input,
      }).then((res) => {
        console.log(res);
        var j = 1;
        for (var i in res.data.rows) {
          res.data.rows[i].isDel = true; //用来展示详情按钮
          res.data.rows[i].orderNum = j++; //用来展示详情按钮

          if (res.data.rows[i].source == 1) {
            res.data.rows[i].source = "手工";
          } else {
            res.data.rows[i].source = "自动";
          }

          if (res.data.rows[i].type == 1) {
            res.data.rows[i].type = "结构化文件";
          }
          if (res.data.rows[i].type == 2) {
            res.data.rows[i].type = "结构化文件";
          }
        }
        this.tData = res.data.rows;
        this.total = res.data.total;
      });
    },
    // 分页点击事件
    paginationCallBack(pageNo) {
      this.pageNo = pageNo;
      this.findFileByFileName();
    },
    // 关闭删除弹窗
    cancelDel() {
      this.isDelAlert = false;
    },

    // 编辑接口
    upload(obj) {
      upload(obj).then((res) => {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        Object.keys(this.form).forEach((key) => {
          this.form[key] = "";
        });
        this.formData = "";
        this.fileObj.formData = "";
        this.form.desc = "";
        this.file = "";
        this.tableData = "";
        this.isAlert = false;
        // this.findOfflineFile();
        this.findFileByFileName();
      });
    },

    // 删除回调展示弹唱
    deleteFun(msg) {
      this.itemMsg = msg;
      this.isDelAlert = true;
    },

    // 删除接口
    deleteOfflineFileById() {
      deleteOfflineFileById({
        id: this.itemMsg.id,
      }).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.isDelAlert = false;
        this.findFileByFileName();
      });
    },

    // 点击详情回调函数
    detailFun(msg) {
      console.log(msg.type);
      if (msg.type == "非结构化文件") {
        console.log(111);
        this.isshow = false;
      } else {
        this.isshow = true;
      }
      this.attrsarr = JSON.parse(msg.attrs);
      for (let i in msg) {
        if (
          msg[i] == "" ||
          msg[i] == null ||
          msg[i] == "[]" ||
          msg[i] == '""' ||
          msg[i] == 'undefined'
        ) {
          msg[i] = "";
        }
      }
      this.form.fileDirectory = msg.fileDirectory;
      this.form.tarTableSchema = msg.tarTableSchema;
      this.isDetial = true;
      this.msgDetail = msg;
    },
    // 编辑按钮
    editMsg(msg) {
      this.isAlert = true;
    },
    // 上传文件按钮
    uploadFileFun() {
      this.isAlert = true;
      this.form.fileDirectory = "";
      this.form.tarTableSchema = "";
      this.tableData = [];
      this.form.type = "结构化文件";
      this.yw_lb_name = "请选择";
      this.isshow = true;
    },

    // 上传按钮
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (this.fileObj.formData) {
          if (valid) {
            let arr = [];
            for (let i in this.tableData) {
              let obj = {};

              obj.code = this.tableData[i].code;
              obj.desc = this.tableData[i].desc;
              obj.name = this.tableData[i].name;
              obj.type = this.tableData[i].c;
              arr.push(obj);
            }

            this.fileObj.formData.append("attrs", JSON.stringify(arr));
            this.fileObj.formData.append("fileName", this.form.desc);
            this.fileObj.formData.append("name", this.form.name);
            this.fileObj.formData.append("describes", this.form.describes);
            this.fileObj.formData.append("issueName", this.form.issueName);
            this.fileObj.formData.append(
              "issueOrganization",
              this.form.issueOrganization
            );
            this.fileObj.formData.append(
              "type",
              this.form.type == "结构化文件" ? 1 : 2
            );
            this.fileObj.formData.append(
              "fileDirectory",
              this.form.fileDirectory
            );
            this.fileObj.formData.append(
              "tarTableSchema",
              this.form.tarTableSchema
            );
            this.fileObj.formData.append("tarDatabase", this.form.tarDatabase);
            this.fileObj.formData.append("tarTable", this.form.tarTable);
            this.fileObj.formData.append("issueIphone", this.form.issueIphone);
            this.fileObj.formData.append("issueMail", this.form.issueMail);
            console.log(this.yw_lb_name);
            if (this.yw_lb_name.length == 1) {
              this.fileObj.formData.append("business", this.yw_lb_name);
            } else {
              let str = "";
              for (let i = 0; i < this.yw_lb_name.length; i++) {
                str += this.yw_lb_name[i] + "/";
              }

              this.fileObj.formData.append(
                "business",
                str.substr(0, str.length - 1)
              );
            }
            this.fileObj.formData.append("region", this.form.region);
            this.upload(this.fileObj.formData);
            // setTimeout(() => {
            //   window.location.reload()
            // }, 500);
          } else {
            return false;
          }
        } else {
          this.$message({
            message: "请选择文件",
            type: "warning",
          });
        }
      });
    },
    // 关闭取消按钮
    cancel() {
      Object.keys(this.form).forEach((key) => {
        this.form[key] = "";
      });
      this.isAlert = false;
      this.yw_lb_name = "";
    },
    // 弹窗选择文件按钮
    xzfun() {
      document.getElementById("fileExport").click();
    },
    // input的change事件
    handleFileChange(e) {
      let inputDOM = this.$refs.inputer;
      this.file = inputDOM.files[0]; // 通过DOM取文件数据
      this.form.desc = this.file.name;
      let size = Math.floor(this.file.size / 1024); //计算文件的大小
      this.fileObj.formData = new FormData(); //new一个formData事件
      this.fileObj.formData.append("file", this.file); //将file属性添加到formData里 //此时formData就是我们要向后台传的参数了
    },
  },
};
</script>
<style lang="stylus" scoped>
.datacenter_con {
  margin: 16px;
  padding: 20px;
  position: relative;
  background: #fff;
}

.datacenter_con .tit {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #dadff5;
}

.datacenter_con .tit .line {
  width: 2px;
  height: 13px;
  background: #4a7bff;
}

.datacenter_con .tit .text {
  color: #4a7bff;
  font-size: 14px;
  font-weight: 600;
  margin-left: 10px;
}

.btn_row {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 20px;
}

.search_box {
  display: flex;
  align-items: center;
}

.search_box >>> .el-input {
  width: 280px;
}

.search_box >>> .el-input__inner {
  height: 32px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.search_box >>> .el-button--small {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.upFileBtn {
  width: 260px;
  height: 40px;
  border: 1px solid #DCDFE6;
  text-align: center;
  line-height: 40px;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

.table_contents {
  display: flex;
  position: relative;
  margin: 30px 0;
}

.table_contents .table_label {
  width: 100px;
  text-align: right;
  font-size: 14px;
  color: #606266;
  padding-right: 10px;
  box-sizing: border-box;
}

.table_label {
  font-size: 0.1rem;
  margin-bottom: -18px;
}

.table_contents >>> .el-table td, .table_contents >>> .el-table th {
  padding: 0;
}

.table_contents >>> .el-input {
  margin: 10px 0;
}

.table_contents >>> .el-input__inner {
  font-size: 12px;
}

.table_tab {
  flex: 1;
}

.table_contents .icon_box {
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  lin-height: 20px;
  font-size: 22px;
  cursor: pointer;
  right: 0;
  top: -25px;
}

.btn_box {
  margin: 0;
  display: flex;
  justify-content: flex-end;
}

.detail_box_width {
  width: 400px;
}

.detail .detail_box {
  width: 600px;
  height: 600px;
  overflow-y: auto;
}

.detail .detail_box_form {
  width: 800px;
  height: 650px;
  overflow-y: auto;
}

>>> .el-submenu__title {
  width: 100%;
}

.form_item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.form_item >>> .el-input__inner, .form_item >>> .el-textarea__inner {
  width: 260px;
}

>>> .el-menu--horizontal>.el-submenu .el-submenu__title {
  width: 260px;
  height: 40px;
  border: 1px solid #DCDFE6;
  justify-content: flex-end;
  display: flex;
  align-items: center;
}

.from_box_texts {
  font-size: 14px;
  display: flex;
  justify-content: center;
}

.from_box_texts div {
  margin-bottom: 10px;
  display: flex;
}

.from_box_texts span {
  display: block;
  width: 80px;
  text-align: right;
}

.detaill >>> .el-form {
  .el-form-item__label {
    display: block;
    width: 40%;
    text-align: right;
    margin-bottom: 30px;
    vertical-align: middle;
    float: left;
    font-size: 0.1rem;
    color: #606266;
    line-height: 0.285714rem;
    padding: 0 0.085714rem 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

.detaill >>> .el-form-item__content {
  line-height: 0.285714rem;
  position: relative;
  font-size: 0.1rem;
  width: 300px;
}

.detail >>> .el-table th>.cell {
  font-size: 0.1rem;
}

#table_box {
  margin-top: 30px;
}

.detail .el-form {
  display: flex;
  flex-wrap: wrap;
}

.detail .el-form-item {
  width: 50%;
}

.detail >>> .el-input__inner {
  width: 220px;
}

#ywlb >>> .el-submenu__title {
  width: 1.571429rem;
}

#ywlb >>> .el-menu.el-menu--horizontal {
  border-bottom: none;
}

#ywlb >>> .el-menu--horizontal>.el-submenu {
  float: left;
  border-bottom: 1px solid #e6e6e6;
}

#table_content .upFileBtn {
  width: 1.571429rem;
}

#table_contents >>> .el-input__inner {
  width: 140px;
}

#table_content >>> .el-submenu__title {
  width: 1.571429rem;
  display: flex;
  justify-content: space-between;
}

#zsbox {
  margin-top: -30px;
  // margin-left 60px
}

#zsbox >>> .el-table__empty-block {
  width: 680px;
}

#zsbox >>> .el-input__inner {
  width: 150px;
}

#zsbox >>> .el-table__body-wrapper {
  width: 688.8px;
}

.btn_box {
  margin: 0;
  display: flex;
  justify-content: flex-end;
  margin-top: 165px;
}

#textarea {
  margin-left: 60px;
  background: #F5F7FA;
  border-radius: 6px;
  color: #C0C4CC;
  font-size: 14px;
  font-weight: 580;
}

#addtextarea {
  border-radius: 6px;
  resize: none;
  border: solid red;
  outline-color: #409EFF;
  color: #606266;
  font-size: 14px;
  font-weight: 600;
}

// .from_box_texts div {
// margin-bottom: 0.071429rem;
// display: flex;
// align-items: center;
// }

// #text_from{
// tranform:translateX(30px)
// }
#schema >>> .el-form-item__label {
  transform: translate(45px, 22px);
}

#detail_box {
  width: 4.285714rem;
  height: 200px;
  overflow-y: auto;
}

#el_texttarea >>> .el-textarea__inner {
  width: 585px;
}

#table_contents >>> .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-all;
  line-height: 0.164286rem;
  padding-right: 0;
}
</style>
